function init(canvas){
    document.body.append(canvas);
    canvas.width = 400 ;
    canvas.height = 400 ;
}

//提供一个对象，存储所有格子的使用状态
const box = {} ;
let food ;
function initBox(){
    for(let i=0;i<20;i++){
        for(let j=0;j<20;j++){
            box[`${i*20}-${j*20}`] = 0 ;
        }
    }
    food = null ;
}

//1 独立的canvas绘制背景
const canvas1 = document.createElement('canvas');
init(canvas1);
const ctx1 = canvas1.getContext('2d');
ctx1.strokeStyle = '#ccc' ;
for(let i=0;i<=20;i++){
    ctx1.beginPath();
    ctx1.moveTo(i*20,0);
    ctx1.lineTo(i*20,400);
    ctx1.stroke();

    ctx1.beginPath();
    ctx1.moveTo(0,i*20);
    ctx1.lineTo(400,i*20);
    ctx1.stroke();
}


const canvas2 = document.createElement('canvas');
init(canvas2);
const ctx2 = canvas2.getContext('2d');
class Rect{
    constructor(x,y,color,ctx,type){
        this.oldX = x ;
        this.oldY = y ;
        this.x = x ;
        this.y = y ;
        this.type = type ;
        //宽高固定
        this.w = 20 ;
        this.h = 20 ;
        this.color = color?color:'#fac'; 
        this.ctx = ctx ;
    }
    draw(){
        box[`${this.oldX}-${this.oldY}`] = 0 ;
        box[`${this.x}-${this.y}`] = this.type ;
        this.ctx.clearRect(this.oldX,this.oldY,this.w,this.h);
        this.oldX = this.x ;
        this.oldY = this.y ;
        this.ctx.save();
        this.ctx.fillStyle = this.color ;
        this.ctx.fillRect(this.x,this.y,this.w,this.h);
        this.ctx.restore();
    }
}

class Snake{
    constructor(ctx){
        this.dir = 'ArrowRight';
        this.ctx = ctx ;
        this.head = new Rect(0,0,'#f66',ctx,1);
        this.body = [];
        this.score = 100 ;
    }

    draw(){
        this.head.draw();
        if(this.body.length > 0){
            this.body[0].draw();
        }
    }

    move(){
        switch(this.dir){
            case 'ArrowUp' : this.head.y -= 20;break ;
            case 'ArrowRight' : this.head.x += 20 ; break ;
            case 'ArrowDown' : this.head.y += 20 ;break ;
            case 'ArrowLeft' : this.head.x -= 20 ;break ;
        }
        
        //判断游戏结束
        if(this.isOver()){
            alert(`游戏结束,本次游戏获得【${this.score}】分`) ;
            return ;
        }

        //判断是否吃到食物
        if(this.isEat()){
            const rect = new Rect(this.head.oldX,this.head.oldY,null,this.ctx,1);
            this.body.unshift(rect);
            randomFood();

        }else{
            //没有吃到食物，将最后一个位置移动到头位置
            const last = this.body.pop();
            if(last){
                last.x = this.head.oldX ;
                last.y = this.head.oldY ;
                this.body.unshift(last);
            }
        }

        this.draw();
        setTimeout(() => {
            this.move();
        }, 200);
    }

    isOver(){
        return this.head.x < 0 || this.head.y < 0 || this.head.x >= 400 || this.head.y >= 400 || box[`${this.head.x}-${this.head.y}`] == 1;
    }

    isEat(){
        return food && this.head.x == food.x && this.head.y == food.y ;
    }


}



const canvas3 = document.createElement('canvas');
init(canvas3);
const ctx3 = canvas3.getContext('2d');

canvas3.onclick = function(){
    ctx2.clearRect(0,0,canvas2.width,canvas2.height);
    ctx3.clearRect(0,0,canvas3.width,canvas3.height);
    initBox();

    const snake = new Snake(ctx2);
    snake.draw();
    snake.move();

    document.onkeydown = function(e){
        //左37 上38  右39 下40
        if(e.code == 'ArrowUp' || e.code == 'ArrowRight' || e.code == 'ArrowDown' || e.code == 'ArrowLeft'){
            if(snake.dir == 'ArrowUp' && e.code == 'ArrowDown'
              ||snake.dir == 'ArrowDown' && e.code == 'ArrowUp'
              ||snake.dir == 'ArrowRight' && e.code == 'ArrowLeft'
              ||snake.dir == 'ArrowLeft' && e.code == 'ArrowRight')
              return ;
            snake.dir = e.code ;
        }
    }

    //绘制食物
    randomFood();

}

//随机x y坐标
function randomPosition(){
    return {
        x : Math.floor(Math.random()*20) * 20,
        y : Math.floor(Math.random()*20) * 20,
    }
}

ctx3.fillStyle = '#66f' ;
function randomFood(){
    let nextPosition = randomPosition();
    while(box[`${nextPosition.x}-${nextPosition.y}`] == 1){
        nextPosition = randomPosition();
    }
    if(food){
        food.x = nextPosition.x ;
        food.y = nextPosition.y ;
    }else{
        food = new Rect(nextPosition.x,nextPosition.y,'#66f',ctx3,2);
    }
    food.draw();
}
